<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>个人中心</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <link rel="stylesheet" href="/static/css/mui.css" />
    <link rel="stylesheet" href="/static/css/font/iconfont.css" />
    <link rel="stylesheet" href="/static/css/product.css" />
    <style type="text/css">
        .refund-href {
            position: absolute;
            bottom: 1px;
            right: 18px;
            font-size: 13px;
            color: #FF7B24;
        }
    </style>
</head>

<body class="bgcolor12">
<div class="contbox">
    <div class="mui-content">

        <!--logo部分-->
        <div class="mui-row">
            <div class="mui-col-xs-12 logo-box clear-fix">
                <img src="/static/img/logo_04.png" /><span>健维商城</span>
            </div>
        </div>
        <!--logo部分-->

        <!--头像部分-->
        <div class="mui-row">
            <div class="mui-col-xs-12 touxiangbox clear-fix">
                <div style="background: url(/static/img/e_02.png);height: 160px;background-size:100% 100%;padding: 20px;">
                    <div class="xiougaibox clear-fix">
                        <div class="xiougaibox1">
                            <img src="${user.headImg}" />
                        </div>
                        <div class="xiougaibox1">
                            <h4>${user.nickName}</h4>
                            <p id="userCompleteInfo">更多</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--头像部分-->
        <!--订单部分-->
        <div id="order-list-box" class="orderbox">
            <% for (ol in orderList) { %>
            <div class="orderbox1">
                <h5>订单号：${ol.orderId}</h5>
                <p>下单时间：${ol.createTime, 'yyyy-MM-dd HH:mm:ss'}</p>
                <div class="shoporder clear-fix">
                    <div class="shoporder1">
                        <img src="${ol.goodsImgUrl}" />
                    </div>
                    <div class="shoporder1">
                        <h6>${ol.goodsName}</h6>
                        <p>价格：${ol.goodsPrice/100}</p>
                        <dd>当前人数：${ol.goodsSales}</dd>
                            <%
                                if(ol.dataStatus == "1"){
                            %>
                            <button onclick="goToPay('${ol.orderId}','${ol.goodsId}')" class="button1">点击付款</button>
                            <%
                                } else if(ol.dataStatus == "3") {
                            %>
                            <button class="button2">订单已关闭</button>
                            <% } else if(ol.dataStatus == "4") {%>
                            <button class="button1">退款申请中</button>
                            <% } else if(ol.dataStatus == "5") {%>
                            <button class="button2">退款完成</button>
                            <% } else {%>
                            <button class="button2">已支付</button>
                            <a href="javascript:goToRefund()" class="refund-href">申请退款</a>
                            <% } %>
                    </div>
                </div>
            </div>
            <% } elsefor{ %>
            <div class="orderbox1">
                <button>去商城转转</button>
            </div>
            <% } %>
        </div>
        <!--订单部分-->
        <!--个人信息部分-->
        <div id="personal-info-box" class="personalbox">
            <div class="personal clear-fix">
                <p><span>昵称</span><span>${user.nickName}</span></p>
                <p><span>真实姓名</span><span>${user.realName}</span></p>
                <p><span>性别</span><span>${user.sex==1?"男":"女"}${user.sex==0?"未知":""}</span></p>
                <p><span>生日</span><span>${user.birthday}</span></p>
                <p><span>单位</span><span>${user.companyName}</span></p>
                <p><span>手机</span><span>${user.phone}</span></p>
                <p><span>家乡</span><span>${user.country}->${user.province}->${user.city}</span></p>
                <p><span>年龄</span><span>${user.ageName}</span></p>
                <p><span>身高</span><span>${user.heightName}</span></p>
                <p><span>体重</span><span>${user.weightName}</span></p>
                <p><span>加入时间</span><span>${user.followTime, "yyyy-MM-dd HH:mm:ss"}</span></p>
            </div>
            <button id="closePreview">关闭</button>
        </div>
        <!--个人信息部分-->
        <!--编辑个人信息部分-->
        <div class="editpersonalbox">
            <div class="editpersonal">
                <p><span>昵称</span><input type="text" placeholder="哪里来的小妞" /></p>
                <p><span>真实姓名</span><input type="text" placeholder="王嘟嘟" /></p>
                <p><span>性别</span><input type="text" placeholder="女" /></p>
                <p><span>生日</span><input type="text" placeholder="2000-13-14" /></p>
                <p><span>单位</span><input type="text" placeholder="中国艰苦奋斗有限公司" /></p>
                <p><span>加入时间</span><input type="text" placeholder="2018-8-32" /></p>
            </div>
            <button class="button4">保存</button>
        </div>
        <!--编辑个人信息部分-->
        <!--占位置高度-->
        <div style="height: 75px;"></div>
        <!--占位置高度-->
        <!--底部nav部分-->
        <div class="mui-row">
            <nav id="bottomNav" class="mui-bar mui-bar-tab footer-tab-nav">
                <a class="mui-tab-item">
                    <span class="mui-icon"><i class="icons-font icon-shop"></i></span>
                    <span class="mui-tab-label">商城首页</span>
                </a>
                <a class="mui-tab-item">
                    <span class="mui-icon"><i class="icons-font icon-classify"></i></span>
                    <span class="mui-tab-label">产品分类</span>
                </a>
                <a class="mui-tab-item mui-active">
                    <span class="mui-icon"><i class="icons-font icon-personal"></i></span>
                    <span class="mui-tab-label">个人中心</span>
                </a>
            </nav>
        </div>
        <!--底部nav部分-->
    </div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/mui.js"></script>
<script type="text/javascript" src="/static/js/shop_commons.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
       $('#userCompleteInfo, #closePreview').bind('click', function () {
           toggleShow();
       });
    });

    function toggleShow() {
        $('#order-list-box').toggle('slow');
        $('#personal-info-box').toggle('slow');
    }

    function goToPay(orderId,goodsId) {
        var payUrl = '/wechat/prepareOrderPay.do?openId=${user.openId}&orderNo='+orderId+'&goodsId='+goodsId;
        console.info('ORDER ID: '+orderId);
        window.location.href = payUrl;
    }

    function goToRefund() {
        mui.alert('正在开发中...');
    }
</script>
</body>

</html>